<#import '/fed/demo/inc/macros.ftl' as macros />
<@macros.header 'form'>
  <#-- <link href="${cssRoot}/admin-form.css" rel="stylesheet"> -->
</@macros.header>

<#global demos = [
  {
    'n': 'normal',
    'd': '\'\'',
    's': '表单',
    'e': '<div id="demo-container"></div>',
    'c': ['new Form({
  container: \'#demo-container\',
  data: {
    groups: [
      {
        label: \'用户名\',
        type: \'text\',
        name: \'username\',
        value: \'CY8888\',
        placeholder: \'CYXXXX\',
        attrs: \'readonly required\'
      },
      {
        label: \'密码\',
        type: \'password\',
        name: \'password\',
        value: \'\',
        placeholder: \'\',
        attrs: \'required\'
      }
    ]
  },
  events: {
    progress: function () {
      console.log(arguments);
    },
    done: function () {
      console.log(arguments);
    },
    fail: function () {
      console.log(arguments);
    }
  }
});']
  },
  {
    'n': 'upload',
    'd': '\'\'',
    's': '表单',
    'e': '<div id="demo-container2"></div>',
    'c': ['new Form({
  container: \'#demo-container2\',
  data: {
    groups: [
      {
        label: \'文件\',
        type: \'file\',
        name: \'filename\',
        value: \'\',
        placeholder: \'CYXXXX\',
        attrs: \'multiple required\'
      },
      {
        label: \'注释\',
        type: \'textarea\',
        multiline: true,
        name: \'description\',
        value: \'\',
        placeholder: \'CYXXXX\',
        attrs: \'required\'
      }
    ]
  },
  events: {
    progress: function () {
      console.log(arguments);
    },
    done: function () {
      console.log(arguments);
    },
    fail: function () {
      console.log(arguments);
    }
  }
});']
  },
  {
    'n': 'validate',
    'd': '\'\'',
    's': '表单',
    'e': '<div id="demo-container3"></div>',
    'c': ['new Form({
  container: \'#demo-container3\',
  data: {
    groups: [
      {
        label: \'文件\',
        type: \'file\',
        name: \'filename\',
        value: \'\',
        placeholder: \'CYXXXX\',
        required: true
      }
    ]
  },
  events: {
    progress: function () {
      console.log(arguments);
    },
    done: function () {
      console.log(arguments);
    },
    fail: function () {
      console.log(arguments);
    }
  }
});']
  }
]>

<@macros.body 'form' 'form'>
<div class="well">
  <p>带有进度反馈的表单提交，通过事件订阅 `progress`</p>
</div>
</@macros.body>

<@macros.footer>
  <script>
    seajs.use(['${appRoot}/common/form/form'], function (Form) {
      $('.demo > button').on('click', function () {
        new Function('Form', this.nextElementSibling.textContent)(Form);
      }).trigger('click');
    });
  </script>
</@macros.footer>